<template>
	<view class="content">
		<view class="head-wrap row" :style="{'top': topValue}">
			<view class="uni-icon uni-icon-arrowright arrowright" />
			<view class="result" @tap="changeShow('QS_Picekr_date1')">{{resultStart}}</view>
			<view class="text">
				至
			</view>
			<view class="uni-icon uni-icon-arrowright arrowright" />
			<view class="result" @tap="changeShow('QS_Picekr_date2')">{{resultEnd}}</view>
		</view>
		
		<view :style="{'height': '44px'}"></view>

		<view class="no-data col" v-if="!hasCountData">
			<view class="integral_image">
				<image src="../../static/img/integral/nodata.png" mode="aspectFill"></image>
			</view>
			<view class="text">
				暂时还没有积分统计哦~
			</view>
		</view>
		<view class="has-data" v-if="hasCountData" >
			<view class="row-item" v-for="(value,key) in dataLists" :key="key">
				<view class="row-left">
					<image :src="value.avatar" mode="aspectFill"></image>
				</view>
				<view class="row-center">
					<view class="col-title" v-if="value.name">
						{{value.name}}
					</view>
					<view class="col-content" v-if="value.text">
						{{value.text}}
					</view>
					<view class="col-time" v-if="value.date">
						{{value.date}}
					</view>
				</view>
				<view class="row-right">
					<view class="amount row">
						<view class="amount-text">
							{{value.direction == 'in'?'+ ':'- '}}{{value.bonus}}
						</view>
					</view>
					<view class="status-text" v-if="false">
						{{value.status}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="uni-tab-bar-loading" v-if="dataLists.length != 0">
			<uni-load-more :loadingType="loadingType" :contentText="loadingText"  ></uni-load-more>
		</view>

		<QSpicker title="请选择日期时间" mode="bottom" type="date" ref="QS_Picekr_date1" pickerId="date_1" :dataSet="dateSet"
		  :autoHide="true" contentColor="#333" :lineHeight=".05" :buttonSet="buttonSet" @hideQSPicker="hideQSPicker($event)"
		 @showQSPicker="showQSPicker($event)" @confirm="confirm($event)" />
		<QSpicker title="请选择日期时间" mode="bottom" type="date" ref="QS_Picekr_date2" pickerId="date_2" :dataSet="dateSet"
		  :autoHide="true" contentColor="#333" :lineHeight=".05" :buttonSet="buttonSet" @hideQSPicker="hideQSPicker($event)"
		 @showQSPicker="showQSPicker($event)" @confirm="confirm($event)" />

	</view>
</template>

<script>
	import { BASE_URL, qrcode ,myIntegralStatistics} from '@/utils/api';
	import QSpicker from '@/components/QuShe-picker/QuShe-picker.vue';
	import uniLoadMore from '@/components/uni-load-more.vue';
	export default {
		components: {
			QSpicker,
			uniLoadMore
		},
		data() {
			return {
				loadingText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				loadingType: 1,
				hasCountData: true,
				resultStart: '',
				resultEnd: '',
				dateSet: {
					dateMode: 3,
					startYear: 2000,
					endYear: new Date().getFullYear()
				},
				buttonSet: {
					confirmColor: '#333'
				},
				dataLists: [],
				page: 1,
				topValue: 0
			};
		},
		methods: {
			initDate() {
				let date = new Date();
				this.resultStart = date.getFullYear() + "-" + (date.getMonth(date.setMonth(date.getMonth()))  ) + "-" + (date.getDate());
				this.resultEnd = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + (date.getDate());
			},
			changeShow(name) {
				this.$refs[name].show();
			},
			showQSPicker(res) {
				console.log(`pickerId为${res.pickerId},类型为${res.type}的QS-picker显示了`);
			},
			hideQSPicker(res) {
				console.log(`pickerId为${res.pickerId},类型为${res.type}的QS-picker隐藏了了`);
			},
			confirm(res) {
				console.log('获取了用户选择----->' + JSON.stringify(res));
				if (res) {
					if (res.pickerId == 'date_1') {
						this.resultStart = res.data;
					}
					if (res.pickerId == 'date_2') {
						this.resultEnd = res.data;
					}
					this.page = 1;
					setTimeout(() => {
						this.myIntegralStatistics();
					}, 500);
					
				}
			},
			async myIntegralStatistics(){
				this.resultStart = this.resultStart.replace(/-/g, '/')
				this.resultEnd = this.resultEnd.replace(/-/g, '/')
				let startTime = new Date(this.resultStart).getTime();
				let endTime = new Date(this.resultEnd).getTime();
				if(!startTime){
					startTime = new Date(this.resultStart).valueOf();
				};
				
				if(!endTime){
					endTime = new Date(this.resultEnd).valueOf();
				};
				console.log(this.resultStart);
				console.log(this.resultEnd);
				console.log(startTime);
				console.log(endTime);
				let res = await myIntegralStatistics(this.page, startTime, endTime);
				if(res.status == 0){
					// res.data.docs.map((item) => {
					// 	if(item.)
					// 	item.avatar
					// })
					if(this.page==1)
					{
						this.dataLists=res.data.docs;
						if(res.data.docs.length == 0){
							this.hasCountData = false;
						}else{
							this.hasCountData = true;
						}
					}
					else{
						this.dataLists=this.dataLists.concat(res.data.docs);
						this.hasCountData = true;
					}
					
					if(res.data.docs.length < 10){
						this.loadingType = 2;
						
					}else{
						this.loadingType = 0;
					}
					
				}else{
					this.hasCountData = true;
				}
				this.$forceUpdate();
			}
		},
		onReachBottom() {
			this.loadingType = 1;
			this.page++;
			this.myIntegralStatistics();
		},
		
		onPullDownRefresh() {
			this.page = 1;
			this.myIntegralStatistics();
		},
		onLoad() {
			this.initDate();
			this.myIntegralStatistics();
			
			// #ifdef APP-PLUS
			this.topValue = '0px'
			// #endif
			// #ifdef H5
			this.topValue = '44px'
			// #endif
		}

	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		border-top: 2upx solid #E3E3E3;
		position: relative;
	}

	.head-wrap {
		height: 88upx;
		background: rgba(244, 244, 244, 1);
		box-shadow: 0upx 3upx 6upx 0upx rgba(155, 155, 155, 0.15);
		padding: 0upx 31upx;
		width: 100%;
		box-sizing: border-box;
		color: rgba(51, 51, 51, 1);
		font-size: 30upx;
		position: fixed;
		left: 0rpx;
		z-index: 10;
		.arrowright {
			font-size: 30upx;
		}

		.result {
			font-size: 30upx;
			margin-left: 26upx;
		}

		.text {
			font-size: 30upx;
			margin: 0upx 37upx 0upx 41upx;
		}
	}

	.no-data {
		.integral_image {
			margin-top: 200upx;

			image {
				width: 459upx;
				height: 285upx;
			}
		}

		.text {
			height: 32upx;
			font-size: 30upx;
			font-weight: 400;
			color: #BBD5EF;
			margin-top: 69upx;
		}

	}

	.row-item {
		height: 180upx;
		padding: 41upx 32upx 0upx 32upx;
		border-bottom: 2upx solid #E3E3E3;
		display: flex;
		flex-direction: row;
		justify-content:space-between;

		.row-left {
			margin-right: 15upx;
			width: 64upx;
			height: 64upx;

			image {
				width: 64upx;
				height: 64upx;
				border-radius: 50%;
			}
		}

		.row-center {
			display: flex; 
			flex-direction: column;
			flex:1;
			.col-title {
				height: 28upx;
				line-height: 1.0;
				font-size: 30upx;
				color:rgba(51,51,51,1);
			}
			.col-content{
				height: 23upx;
				font-size: 24upx;
				line-height: 1.0;
				color:rgba(51,51,51,1);
				margin:32upx 0upx;
			}
			.col-time{
				height: 19upx;
				font-size: 24upx;
				line-height: 1.0;
				color:rgba(153,153,153,1);
			}
		}
		.row-right{
			text-align: right;
			padding-top: 40rpx!important;
			.amount{
				.amount-plusempty{
					font-weight:bold;
				}
				.amount-text{
					font-size:40upx;
					font-weight:bold;
				}
			}
			.status-text{
				color:rgba(51,51,51,1);
			}
		}
	}
</style>
